<!DOCTYPE html>
<html>
<head>

	<meta http-equiv="Content-type" content="text/html; charset=utf-8">

	<title>Dojo Toolkit - Declaration test</title>

	<script type="text/javascript" src="boilerplate.js"></script>

	<script type="text/javascript">
		require([
			"doh/runner",
			"dojo/on",
			"dojo/parser",
			"dijit/Declaration",
			"dijit/ProgressBar",
				"dojo/domReady!"
		], function(doh, on, parser){

			doh.register("dijit.Declaration", [
				function parse(){
					// run parser inside of DOH so we can tell if there are any exceptions
					parser.parse();

					// test instantiation of dojo.Declaration widgets
					doh.t(hideButtonA, "hideButtonA instantiated");
					doh.t(hideButtonB, "hideButtonB instantiated");
					doh.t(hideButton2A, "hideButton2A instantiated");
					doh.t(hideButton2B, "hideButton2B instantiated");
				},

				function basicTests(){	
					// test <script type="dojo/method">	
					doh.t(HideButton.prototype.myHandler, "myHandler method added to HideButton prototype");
					doh.t(HideButton2.prototype.myHandler, "myHandler method added to HideButton2 prototype");
	
					// test prototype extension	
					doh.t(mPrototypeExecuted, "m prototype executed");
	
					// test parameters
					doh.is("blah", m1.foo, "m1.foo");
					doh.is(73, m2.progress, "m2.progress");
	
					// test <script type="dojo/aspect">
					doh.t(foo1, "foo1 exists");
					doh.t(/modified by dojo\/aspect method=startup/.test(foo1.domNode.innerHTML), "dojo/aspect fired");
				},

				function functions(){
					doh.is(3, m1.plus(1, 2), "testing function definition with data-dojo-args")
				},

				function events(){
					doh.t(button1, "button created");
					doh.t(button1.onButtonClick, "onButtonClick exists");

					var clicked = false;
					button1.on("ButtonClick", function(){
						clicked = true;
					});
					on.emit(button1.domNode, "click", {});
					doh.t(clicked, "clicked");
				}
			]);

			doh.run();
		});
	</script>

</head>
<body class="claro">
	<h3>Simple macro:</h3>
	<p>(Check to make sure that links contain employee number)
	<div data-dojo-type="dijit/Declaration" data-dojo-props='widgetClass:"Employee", defaults:{ empid: 123, name: "" }'>
		<span>${name}</span>
		<a href="update.php?id=${empid}">update</a>
		<a href="delete.php?id=${empid}">delete</a>
	</div>
	<div data-dojo-type="Employee" data-dojo-props='empid:100, name:"Alan Allen"'></div>
	<div data-dojo-type="Employee" data-dojo-props='empid:101, name:"Bob Brown"'></div>
	<div data-dojo-type="Employee" data-dojo-props='empid:102, name:"Cathy Cameron"'></div>

	<h3>Using data-dojo-attach-event, data-dojo-attach-point</h3>
	<div data-dojo-type="dijit/Declaration" data-dojo-props='widgetClass:"HideButton"'>
		XXX<button data-dojo-attach-event="onclick: myHandler" data-dojo-attach-point="containerNode"></button>XXX
		<script type='dojo/method' data-dojo-event='myHandler'>
			this.domNode.style.display="none";
		</script>
	</div>
	<button data-dojo-id="hideButtonA" data-dojo-type="HideButton" >Click to hide</button>
	<button data-dojo-id="hideButtonB" data-dojo-type="HideButton" >Click to hide #2</button>

	<h3>Extending another widget</h3>
	<p>HideButton2 extends HideButton (above) and changes the template (but keeps the onclick handler).</p>
	<span data-dojo-type="dijit/Declaration" data-dojo-props='widgetClass:"HideButton2", mixins:["HideButton"]'>
		YYY<button data-dojo-attach-event="onclick: myHandler" data-dojo-attach-point="containerNode"></button>YYY
	</span>
	<button data-dojo-id="hideButton2A" data-dojo-type="HideButton2" >Hide me extended</button>
	<button data-dojo-id="hideButton2B" data-dojo-type="HideButton2" >Hide me extended #2</button>

	<h3>Using dojo/method:</h3>
	<div data-dojo-type="dijit/Declaration" data-dojo-props='widgetClass:"m", defaults:{ foo: "thud", progress: 10 }'>
		<script type='dojo/method' data-dojo-event='postCreate'>
			console.log("in postCreate ", this, arguments);
			mPrototypeExecuted = true;
			this.inherited(arguments);
			this.baz.innerHTML += " (created via custom postCreate) ";
		</script>
		<script type='dojo/method' data-dojo-event='plus' data-dojo-args="a, b">
			return a + b;
		</script>

		<p>thinger blah stuff ${foo}</p>

		<div data-dojo-type="dijit/ProgressBar" data-dojo-props='style:"width:400px", maximum:200,
			progress:${progress}'></div>
		<p data-dojo-attach-point='baz'>baz thud</p>
	</div>

	<div data-dojo-id="m1" data-dojo-type="m" data-dojo-props='foo:"blah", progress:50'></div>
	<div data-dojo-id="m2" data-dojo-type="m" data-dojo-props='foo:"thinger", progress:73'></div>

	<h3>Using dojo/aspect:</h3>
	<div data-dojo-type="dijit/Declaration" data-dojo-props='widgetClass:"foo", defaults:{ foo: "thud", progress: 10 }'>
		<script type='dojo/aspect' data-dojo-method='startup'>
			this.baz.innerHTML += " (modified by dojo/aspect method=startup) ";
		</script>

		<p>thinger blah stuff ${foo}</p>

		<div data-dojo-type="dijit/ProgressBar" data-dojo-props='style:"width:400px", maximum:200,
			progress:${progress}'></div>
		<p data-dojo-attach-point='baz'>baz thud</p>
	</div>

	<div data-dojo-id="foo1" data-dojo-type="foo" data-dojo-props='foo:"blah", progress:50'></div>
	<div data-dojo-id="foo2" data-dojo-type="foo" data-dojo-props='foo:"thinger", progress:73'></div>

	<h3>data-dojo-attach-event on root node</h3>
	<div data-dojo-type="dijit/Declaration"
		 	data-dojo-props='widgetClass:"button"'
			data-dojo-attach-event="onclick: onButtonClick">
		<script type='dojo/method' data-dojo-event='onButtonClick'>
			console.log("in onButtonClicked");
		</script>
		click me
	</div>

	<button data-dojo-id="button1" data-dojo-type="button">click me</button>
</body>
</html>
